<script setup lang="ts">

import * as echarts from 'echarts';
import 'echarts-gl';
import {onBeforeUnmount, onMounted, ref} from "vue";
import socket from "@/util/WebSocket"


let option = {
    grid3D: {
        viewControl: {
            autoRotate: false,
            center: [0,0,0],
            // 视角距离
            distance: 220,
            // 上下旋转角度
            alpha: 20,
            // 左右旋转角度
            beta: 40,
        },
        top: '-5%'
    },
    tooltip: {},
    xAxis3D: {
        name: '相位',
        type: 'value',
        interval: 45,
        max: 360,
        min: 0,
        axisLabel: { formatter: '{value}°' },
        splitArea: {
            show: true
        }
    },
    yAxis3D: {
        name: '周期',
        type: 'value',
        interval: 5,
        min: 0,
        max: 50,
        splitArea: {
            show: true
        }
    },
    zAxis3D: {
        name: '幅值',
        type: 'value',
        interval: 10,
        min: -80,
        // 可以解决数据为负数，从0长柱子，但不能设置 min 和 max
        scale: true,
        // max: 0,
    },
    visualMap: {
        dimension: 2,
        outOfRange: {
            color: '#0059ff' // 数据值不在定义的任何范围内时的颜色
        },
        pieces: [
            { gt: -10, lte: 0, color: '#f18383' },
            { gt: -20, lte: -10, color: '#f14d4d' },
            { gt: -30, lte: -20, color: '#f83b3b' },
            { gt: -40, lte: -30, color: '#ff0000' },
            { gt: -50, lte: -40, color: '#f8e894' },
            { gt: -60, lte: -50, color: '#fbd32f' },
            { gt: -70, lte: -60, color: '#fbe800' },
            { gt: -80, lte: -70, color: '#5a79f3' }
        ],
    },
    dataset:{
        source: []
    },
    series: [
        {
            name: 'PRPS',
            coordinateSystem: 'cartesian3D',
            type: 'bar3D',
            shading: 'lambert',
            // 开启大数据模式
            large: true,
            // 降采样
            sampling: 'average',
            // 数据量大于1万时开启高性能模式,如果没有大于1万;不会开启,会统一颜色
            // largeThreshold: 100,
            // 关闭鼠标事件
            silent: true,
            animation: false,
            barSize: [0.25, 0.5]
        },
    ]
}
let charts = null
let timer = null
onMounted(() => {
    charts = echarts.init(document.getElementById('main'));
    charts.setOption(option);
    socket.init(1,(connection) => {
        connection.onmessage = (message) => {
            let json = JSON.parse(message.data)
            json = json['zx_data_src.1_18_1_21.data']
            if(!json){
                return
            }
            // if(timer)return;
            // timer = true
            data(json.rdata)
            // setTimeout(() => {
            //     timer = false
            // },100)
        };
    })
    // charts.on('finished', function () {
    //     timer = false
    // });

})

function data(data){
    charts.setOption({
        dataset: {
            source : data
        }
    })
}

onBeforeUnmount(() => {
    // 关线程
    socket.close()
})
</script>

<template>
    <div style="width: 100%;height: 100%">
        <div id="main" style="height: 94%;width: 100%"></div>
    </div>
</template>

<style scoped>

</style>
